<!-- 事件日志 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0;">
      <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset"/>
      <div class="tabclick">
        <!-- <div class="tabitem" @click="handleClick1()">
          <span>显示日统计趋势<i :class="tab1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
        </div> -->
        <div class="tabitem" @click="handleClick()">
          <span><i :class="tab ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span><!-- 显示综合统计 -->
        </div>
      </div>
      <el-row>
        <el-tabs type="border-card" v-if="tab" style="margin-top:16px;" v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="显示日统计趋势" name="day" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <barchart v-if="this.activeName === 'day'" :chartData="barchartData" @barclick="barclick"/>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="终端用户统计分析" name="user" lazy>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :lg="24">
                <piechart v-if="this.activeName === 'user'"  :chartData="pie1Data" :title="'终端用户统计分析'" @pieclick="pieclick"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="事件类型统计分析" name="type" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <piechart v-if="this.activeName === 'type'" :chartData="pie2Data" :title="'事件类型统计分析'" @pieclick="pieclick"/>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="严重性等级统计分析" name="level"  lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <piechart v-if="this.activeName === 'level'"  :title="'严重性等级统计分析'" :chartData="pie3Data" @pieclick="pieclick"/>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }" style="padding-right: 8px;margin:16px 0;">
        <!-- <span class="title">事件日志列表</span> -->
        <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
          <el-table-column label="序号" width="80" type="index" align="left"></el-table-column>
          <el-table-column label="发生时间" prop="TransTime" width="160px" align="left"></el-table-column>
          <el-table-column label="部门/姓名" prop="Name" align="left" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.Department + ' / ' + scope.row.Name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="事件类型" :formatter="typeFormat" prop="EventID" width="150px" align="left"></el-table-column>
          <!-- <el-table-column label="终端地址" prop="DeviceIP" align="left"></el-table-column> -->
          <el-table-column label="严重性等级" prop="EventLevel" :formatter="typeFormat2" align="left" width="100">
            <template slot-scope="scope">
              <span :style="classObj(scope.row)">
                {{ typeFormat2(scope.row) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="重复次数" prop="RepeatCount" align="left" width="100"></el-table-column>
          <el-table-column label="描述信息" prop="Descp" align="left"></el-table-column>
          <el-table-column label="确认状态" prop="IsACK" align="left" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.IsACK === 0" style="color:#E6A23C">未确认</span>
              <span v-if="scope.row.IsACK != 0" style="color:#67C23A">已确认</span>
            </template>
          </el-table-column>
            
          <el-table-column label="操作" align="left" width="140px">
            <template slot="header">
              <span>操作</span>
              <el-button style="margin-left:10px;" type="primary" size="mini" @click="changeMailGlobal(1)">确认本页</el-button>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="changeMailGlobal(2,scope.row)">确认</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" 
          :current-page=pageNum
          :page-size=pageSize
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import connsearch from "./components/connsearch.vue";
import barchart from "./components/barchart.vue";
import piechart from "./components/piechart.vue";
import { getNowDay, parseTime } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
export default {
  components: { connsearch, barchart, piechart },
  data() {
    let that = this
    return {
      aaa:'',
      activeName: "day",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      tab2: false,
      barchartData: {xAxis:[],series:[]},
      pie1Data: [],
      pie2Data: [],
      pie3Data: [],
      tableData:[],
      searchform:{},
      formOptions: [
        {
          col: 8,
          hidden: false,
          label: "日期", // label文字
          prop: "timeRange", // 字段名
          initValue: [], // 字段初始值,
          element: "el-date-picker", // 指定elementui组件
          type: "" // 日期选择类型,
        },
        {
          col: 4,
          hidden: false,
          label: "严重性等级", // label文字
          prop: "EventLevel", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: 0, // 字段初始值,
          placeholder: "请选择严重性等级", // elementui组件属性
          options: [],
          rules: [], // elementui组件属性
          events: {
            // elementui组件方法
            input(val) {
              // console.log(val)
            }
          }
        },
        {
          col: 6,
          hidden: false,
          label: "事件类型", // label文字
          prop: "EventID", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: 0, // 字段初始值,
          placeholder: "请选择事件类型", // elementui组件属性
          options: [],
          rules: [], // elementui组件属性
          events: {
            // elementui组件方法
            input(val) {
              // console.log(val)
            }
          }
        },
        {
          col: 6,
          label: "终端用户", // label文字
          prop: "Name", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: "", // 字段初始值,
          placeholder: "请选择终端用户", // elementui组件属性
          options: [],
          rules: [], // elementui组件属性
          events: {
            // elementui组件方法
            input(val) {
              // console.log(val);
            }
          }
        },
        {
          col: 8,
          label: "备注信息", // label文字
          prop: "Descp", // 字段名
          element: "el-input", // 指定elementui组件
          initValue: "", // 字段初始值,
          placeholder: "请输入备注信息,支持模糊查询。", // elementui组件属性
          rules: [], // elementui组件属性
          events: {
            // elementui组件方法
            input(val) {
              // console.log(val);
            }
          }
        }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = this.$store.state.user.DefaultPageLength;
    let xTime = new Date().getTime()
    let endTime = new Date(new Date().setHours(0, 0, 0, 0))
    let startTime = endTime - ( this.$store.state.user.DefaultLogDays * 24 * 60 * 60 *1000);
    let arr = [ parseTime(startTime),'']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.$set(this.searchform,'timeRange', arr)
    this.$set(this.searchform,'Descp', '')
    this.$set(this.searchform,'EventID', 0)
    this.$set(this.searchform,'Name', '')
    this.$set(this.searchform,'EventLevel', 0)
    
    this.getData();
    this.GetEventType();
    this.GetUIDictParam('AuditLogLevel')
    this.GetEventLogSumGroupByDate()
  },
  computed: {
    classObj(Value) {           
      return (Value) => { 
        // console.log(Value.EventLevel);
        if (Value.EventLevel ===0){
          return {'color':'red'}  
        } else if (Value.EventLevel === 1){
          return {'color':'#F56C6C',}
        } else if (Value.EventLevel ===2){
          return {'color':'#E6A23C',}
        } else if (Value.EventLevel === 3){
          return {'color':'#E6A23C',}
        } else if (Value.EventLevel === 4){
          return {'color':'#409EFF',}
        } else if (Value.EventLevel === 5){
          return {'color':'#409EFF',}
        }      
      }
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.GetEmployee()
  },
  methods: {
    // 获取所有数据
    getData(){
      this.GetEventLog()
      // this.GetEventType();
      // this.GetEventLogSumGroupByUser()
      // this.GetEventLogSumGroupByEventID()
      // this.GetEventLogSumGroupByDate()
    },
    tabClick(tab){
      // this.reset()
      // let endTime = new Date(new Date().setHours(0, 0, 0, 0))
      // let startTime = endTime - ( this.$store.state.user.DefaultLogDays * 24 * 60 * 60 *1000);
      // let arr = [ parseTime(startTime),'']
      // this.formOptions.map( item => {
      //   if(item.label === '日期'){
      //     item.initValue = arr
      //   }
      // })
      // this.$refs.connsearch.addInitValue()
      // this.$set(this.searchform,'timeRange', arr)
      // this.$set(this.searchform,'Descp', '')
      // this.$set(this.searchform,'EventID', 0)
      // this.$set(this.searchform,'Name', '')
      // this.$set(this.searchform,'EventLevel', 0)
      if(tab.name === 'day'){
        this.GetEventLogSumGroupByDate()
      }else if(tab.name === 'user'){
        this.GetEventLogSumGroupByUser();
      }else if(tab.name === 'level'){
        this.GetEventLogSumGroupByLevel()
      }else if(tab.name === 'type'){
        this.GetEventLogSumGroupByEventID()
      }
    },
    barclick(val){
      this.pageNum = 1
      this.searchform.timeRange = [ `${val} 00:00:00`, `${val} 23:59:59` ]
      // let arr = [ `${val} 00:00:00`, `${val} 23:59:59` ]
      // this.formOptions = this.formOptions.map( item => {
      //   if(item.label === "日期"){
      //     item.initValue = arr
      //   }else if(item.label === "统计排名"){
      //     item.initValue = 10
      //   }else{
      //     item.initValue = ""
      //   }
      //   return item
      // })
      // this.$set(this.searchform, 'timeRange', arr)
      // this.$refs.connsearch.addInitValue()
      this.GetEventLog()
    },
    pieclick(val,title,id){
      this.pageNum = 1
      if(title === '终端用户统计分析'){
        this.searchform.Name = val
        this.$refs.connsearch.searchform.Name = val
      }else if(title === '事件类型统计分析'){
        this.searchform.EventID = id
        this.$refs.connsearch.searchform.EventID = id
      }else if(title === '严重性等级统计分析'){
        this.searchform.EventLevel = id
        this.$refs.connsearch.searchform.EventLevel = id
      }else{
        this.searchform.Descp = val
      }
      // if(title === '访问用户统计分析'){
      //   this.$set(this.searchform, 'Name', val)
      //   this.formOptions = this.formOptions.map( item => {
      //     if(item.label === "日期"){
      //       item.initValue = this.searchform.timeRange
      //     }else if(item.label === "统计排名"){
      //       item.initValue = 10
      //     }else if(item.label === "终端用户"){
      //       item.initValue = val
      //     }else{
      //       item.initValue = ""
      //     }
      //     return item
      //   })
      // }else{
      //   this.$set(this.searchform, 'Descp', val)
      //   this.$set(this.searchform, 'timeRange', this.searchform.timeRange)
      //   this.formOptions = this.formOptions.map( item => {
      //     if(item.label === "日期"){
      //       item.initValue = this.searchform.timeRange
      //     }else if(item.label === "统计排名"){
      //       item.initValue = 10
      //     }else if(item.label === "描述信息"){
      //       item.initValue = val
      //     }else{
      //       item.initValue = ""
      //     }
      //     return item
      //   })
      // }
      // this.$refs.connsearch.addInitValue()
      this.GetEventLog()
    },
    // 获取终端用户
    async GetEmployee(){
      const res = await connrequest('GetEmployee')
      res.Data = res.Data.map(item => {
        item.label = item.Department +' / '+item.Name 
        item.value = item.Name
        return item
      })
      let arr = [{value: '', label: '全部'}]
      this.formOptions.map( item => {
        if(item.label === '终端用户'){
          item.options = [...arr,...res.Data]
        }
      })
    },
    // 获取事件日志列表
    async GetEventLog(){
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] || '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: this.searchform.Name || '',
          Descp: this.searchform.Descp || '',
          EventID: this.searchform.EventID,
          EventLevel: this.searchform.EventLevel,
          SumCount: 10
        }
      }
      const res = await connrequest('GetEventLog', data)
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        return item
      })
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
    },
    // 获取事件类型
    async GetEventType(){
      const res = await connrequest('GetEventType')
      // console.log(res);
      let option = []
      let arr = [{value: 0, label: '全部'}]
      res.Data.map(items=>{
        option.push({
          value:items.EventID,
          label:items.AlarmDescp
        })
      })
      this.formOptions.map( item => {
        if(item.label === '事件类型'){
          item.options = [...arr,...option]
        }
      })
      // console.log(option);
    },
    // 获取事件用户统计
    async GetEventLogSumGroupByUser(){
      let arr = []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] || '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: this.searchform.Name || '',
          Descp: this.searchform.Descp || '',
          SumCount: 10,
          EventLevel: this.searchform.EventLevel,
          EventID: this.searchform.EventID
        }
      }
      const res = await connrequest('GetEventLogSumGroupByUser', data)
      res.Data.map( item =>{
        arr.push({name: item.Name, value: item.Count})
      })
      this.pie1Data = arr
    },
    // 按严重性等级分类
    async GetEventLogSumGroupByLevel(){
      let arr = []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] || '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: this.searchform.Name || '',
          Descp: this.searchform.Descp || '',
          SumCount: 10,
          EventLevel: this.searchform.EventLevel,
          EventID: this.searchform.EventID
        }
      }
      const res = await connrequest('GetEventLogSumGroupByLevel', data)
      res.Data.map( item =>{
        if (item.ClassID === 1) {
          item.Name = "致命"
        }else if(item.ClassID === 2) {
          item.Name = "紧急"
        }else if(item.ClassID === 3) {
          item.Name = "重要"
        }else if(item.ClassID === 4) {
          item.Name = "监视"
        }else if(item.ClassID === 5) {
          item.Name = "一般"
        }else if(item.ClassID === 6) {
          item.Name = "通知"
        }
        arr.push({name: item.Name, id:item.ClassID, value: item.Count})
      })
      this.pie3Data = arr
    },
    // 获取事件域名统计
    async GetEventLogSumGroupByEventID(){
      let arr = []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] || '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: this.searchform.Name || '',
          Descp: this.searchform.Descp || '',
          SumCount: 10,
          EventLevel: this.searchform.EventLevel,
          EventID: this.searchform.EventID
        }
      }
      const res = await connrequest('GetEventLogSumGroupByEventID', data)
      if(res.Status.StatusCode === 0){
        const res1 = await connrequest('GetEventType', data)
        res.Data.map( item =>{
          res1.Data.map(newitem=>{
            // console.log(item.ClassID,newitem.EventID);
            if (item.ClassID === newitem.EventID) {
              item.Name = newitem.AlarmDescp;
            }
          })
          arr.push({name: item.Name, id: item.ClassID, value: item.Count})
        })
      }
      console.log(arr);
      this.pie2Data = arr
    },
    // 获取事件日期统计
    async GetEventLogSumGroupByDate(){
      let xAxis = []
      let series= []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] || '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: this.searchform.Name || '',
          Descp: this.searchform.Descp || '',
          SumCount: 10,
          EventLevel: this.searchform.EventLevel,
          EventID: this.searchform.EventID
        }
      }
      const res = await connrequest('GetEventLogSumGroupByDate', data)
      res.Data.map( item =>{
        xAxis.push(item.Name)
        series.push(item.Count)
      })
      this.barchartData = {xAxis,series}
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchform = {...val}
      this.getData()
      if(this.activeName === 'day'){
        this.GetEventLogSumGroupByDate()
      }else if(this.activeName === 'user'){
        this.GetEventLogSumGroupByUser();
      }else if(this.activeName === 'level'){
        this.GetEventLogSumGroupByLevel()
      }else if(this.activeName === 'type'){
        this.GetEventLogSumGroupByEventID()
      }
    },
    async changeMailGlobal(status,row){
      let arr = []
      if (status===1) {
        this.tableData.map(item=>{
          arr.push(item.AutoID)
        })
      }else{
        arr.push(row.AutoID);
      }
      const data = {
        Data:arr
      }
      const res = await connrequest('ConfirmEvent', data)
      this.$message.success('操作成功');
      this.getData()
    },
    // 重置
    reset(){
      let xTime = new Date().getTime()
      let endTime = new Date(new Date().setHours(0, 0, 0, 0))
      let startTime = endTime - (window.sessionStorage.getItem('DefaultLogDays') * 1 * 3600 * 24 * 1000);
      let arr = [ parseTime(startTime),'']
      this.pageNum = 1
      // this.formOptions = this.formOptions.map( item => {
      //   if(item.label === "日期"){
      //     item.initValue = arr
      //   }else if(item.label === "统计排名"){
      //     item.initValue = 10
      //   }else{
      //     item.initValue = ""
      //   }
      //   return item
      // })
      this.searchform = {}
      
      this.$refs.connsearch.addInitValue()
      this.$set(this.searchform,'timeRange', arr)
      this.$set(this.searchform,'Descp', '')
      this.$set(this.searchform,'EventID', 0)
      this.$set(this.searchform,'Name', '')
      this.$set(this.searchform,'EventLevel', 0)
      this.getData()
      if(this.activeName === 'day'){
        this.GetEventLogSumGroupByDate()
      }else if(this.activeName === 'user'){
        this.GetEventLogSumGroupByUser();
      }else if(this.activeName === 'level'){
        this.GetEventLogSumGroupByLevel()
      }else if(this.activeName === 'type'){
        this.GetEventLogSumGroupByEventID()
      }
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetEventLog()
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.GetEventLog()
    },
    handleClick() {
      this.tab = !this.tab
    },
    handleClick2() {
      this.tab2 = !this.tab2
    },
    async GetUIDictParam(type){
      const data = {
        Data : {
          FilterType:type
        }
      }
        let levelOption = []
        let typeOption = []
        const res = await connrequest('GetUIDictParam',data)
        // this.Dictionaries = res.Data;
        let arr = [{value: 0, label: '全部'}]
        if (type === 'AuditLogLevel') {
          res.Data.map(levelItem=>{
            levelOption.push({
                label:levelItem.Descp,
                value:levelItem.Value
            })
          })
        }else if(type === 'AuditLogType'){
          res.Data.map(logTypeItem=>{
            typeOption.push({
                label:logTypeItem.Descp,
                value:logTypeItem.Value
            })
          })
        }
        
        
        this.formOptions.map( item => {
            if(item.label === '严重性等级'){
                item.options = [...arr,...levelOption]
            }else if(item.label === '审计类型'){
                item.options = [...arr,...typeOption]
            }
        })
    },
    typeFormat(row){
      // console.log(this.formOptions);
        let type = ''
        this.formOptions.map( item => {
          // console.log(item);
          if(item.label === '事件类型'){
            // console.log(item.options);
            item.options.map( newitem =>{
              // console.log(row.EventLevel);
              if(row.EventID === newitem.value){
                // console.log(111111);
                type = newitem.label
              }
            })
          }
        })
        
        return type
    },
    typeFormat2(row){
        let type = ''
        this.formOptions.map( item => {
          if(item.label === '严重性等级'){
            
            item.options.map( newitem =>{
              if(row.EventLevel === newitem.value){
                type = newitem.label
              }
            })
          }
        })
        
        return type
    },
  }
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";
</style>